/*
 * @author: Spring
 * @create: 2021-05-14 14:42 PM
 * @license: MIT
 * @lastAuthor: Spring
 * @lastEditTime: 2021-05-25 20:15 PM
 * @desc: 
 */

@import "_public";
.container {
  width: 100%;
  @include flex(flex-start, center, column);
  .logo {
    width: 886px;
    height: 286px;
    margin: 84px auto 99px;
    img {
      height: 286px;
      width: 886px;
    }
  }
  form{
    @include flex(flex-start,center,column);
  }
  input {
    width: 862px;
    height: 180px;
    border-radius: 69px;
    margin-bottom: 76px;
    border-style: none;
    border: 6px solid #0063b1;
    outline: none;
    font-size: 100px;
    text-align: center;
  }
}

.chatroom {
  @include grid(420px 1fr,100vh);
  width: 100%;
  height: 100vh;
  background-color: #e5e5e5;
  .online {
    font-size: 16px;
    position: relative;
    overflow-y: scroll;
    .header {
      @include font(18px, #667A90,bold,OpenSans-Semibold);
      @include flex(space-between, center);
      @include position(absolute,0,none ,none ,0,100%,97.5px);
      background-color: #fff;
      padding: 0 34.4px;
      box-sizing: border-box;
      >img {
        width: 15px;
        height: 15px;
      }
      .title {
        margin-right: 65px;
        font-family: "Open Sans";
        white-space: nowrap;
      }
      .titleimg{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 50px;
      }
      // .bindvoice{
      //   transition: all .5s;
      // }
      .s,.l {
        margin-right: 36px;
        &:hover{
          cursor: pointer;
        }
      }
    }
    .headersearch {
      @include position(absolute,0 ,none ,none ,0 ,100% ,97.5px );
      background-color: #fff;
      box-sizing: border-box;
      padding: 0 32.5px 0 35.5px;
      z-index: 9999;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .longString{
        background-color: #667A90;
        @include position(absolute,40px,none,none,30px,2px,18px);
      }
      input {
        @include font(16px,#667a90 ,bold ,"Segoe UI" );
        border: none;
        outline: none;
      }
      .iconbox {
        img {
          width:15px;
          height:15px;
          cursor: pointer;
        }
        .c {
          margin-right: 21.5px;
        }
      }
      .list {
        @include position(absolute,72px,none,none,30px,316px,360px);
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        background-color: #fff;
        border: 1px solid #7595b9;
        &-li {
          width: 100%;
          height: 62px;
          border: 1px solid #7595b9;
          background-color: #ebf4fa;
          padding: 7px 16px;
          box-sizing: border-box;
          @include grid(48px 10px 225px,21px 19px);
          grid-template-areas:
            "a b c"
            "a b d";
          img {
            grid-area: a;
            width: 48px;
            height: 48px;
            border-radius: 50%;
          }
          .usern {
            @include font(16px,#667a90,bold,"Open Sans");
            align-self: center;
            grid-area: c;
          }
          .message {
            @include onerow();
            @include font(14px,#667a90,normal,"OpenSans-Semibold");
            align-self: center;
            grid-area: d;
          }
          &:hover{
            cursor: pointer;
          }
        }
      }
      display: none;
    }
    .onlineUser {
      width: 100%;
      // height: 100%;
      margin-top: 98.5px;
      .user {
        @include grid(48px 9px 267px 29px, 24px 24px);
        grid-template-areas:"a b c f" "a d e g";
        background-color: #fff;
        box-sizing: border-box;
        padding: 25px 34px;
        height: 95px;
        margin-top: 1px;
        .name{
          @include font(15px,#667A90,normal,"OpenSans-Semibold");
          grid-area: c;
        }
        .content {
          @include onerow();
          @include font(13px,#667A90,normal,"OpenSans-Semibold");
          grid-area: e;
        }
        .time{
          @include font(11px,#667A90,normal,"OpenSans-Semibold");
          grid-area: f;
          white-space: nowrap;
          justify-self: right;
        }
        .infornum {
          @include flex(center,center);
          @include font(12px,#fff,normal,"OpenSans-Semibold");
          grid-area: g;
          justify-self: right;
          background-color: #7595b9;
          border-radius: 2px;
          width: 18px;
          height: 18px;
        }
        .img {
          grid-area: a;
          position: relative;
          width: 48px;
          height: 48px;
          border-radius: 50%;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
          .circle {
            @include position(absolute,-4px,-4px,none,none,8px,8px);
            border-radius: 50%;
            background-color: #00d905;
          }
        }
        .triangle{
          border-top: 8px solid #EBF4FA;
          border-right: 8px solid #EBF4FA;
          border-left: none;
          border-bottom: none;
          @include position(absolute,0,0,none,none,0,0)
        }
        &:hover{
          cursor: pointer;
        }
      }
    }
  }
  .interface {
    overflow-x: hidden;
    .head {
      background-color: #fff;
      @include font(24px,#42648A,bold,"OpenSans-Semibold");
      @include grid(1fr 21px, 32px 21px);
      padding: 18px 51px 26px 34px;
      box-sizing: border-box;
      grid-template-areas:
        "a b"
        "c b";
      .isonline {
        @include font(16px,#607996,normal,"OpenSans-Semibold");
      }
      .close {
        @include flex(center,center);
        grid-area: b;
        width:21px;
        height:21px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .head2{
      display: none;
    }
    .msg {
      height: calc(100vh - 145px - 98px);
      width: 100%;
      margin-top: 1px;
      background-color: #fff;
      box-sizing: border-box;
      padding: 16px 48px 0 34px;
      background-image: url("../img/bg.png");
      background-size: 55% auto;
      background-repeat: no-repeat;
      background-position: center center;
      overflow-y: auto;
      @mixin duihua($flex,$mleft,$mright,$r,$l,$rotate,$tbottom,$boolean:true) {
        position: relative;
        @include flex($flex, flex-end);
        margin-top: 63px;
        > img {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          margin-left: $mleft;
          margin-right: $mright;
        }
        .content {
          @include font(16px,#607996,normal,"Open Sans");
          padding: 10px 20px;
          box-sizing: border-box;
          background-color: #ebf4fa;
          border-radius: 6px;
          max-width: 1282px;
          min-height: 41px;
          position: relative;
          img {
            transform: rotateY($rotate);
            @include position(absolute,none,$r ,4.9px ,$l ,30px ,21px );
          }
          .slefname{
            @if $boolean {
              @include position(absolute,none,0,-30px,none,100%,30px);
              @include flex(flex-end,center)
            } @else{
              @include position(absolute,none,none,-30px,0,100%,30px);
            }
            @include font(16px,#8c9bac,bold,"Open Sans");
          }
          .time {
            @if $boolean {
              @include position(absolute,none,0,$tbottom,none,100%,30px);
              @include flex(flex-end,center)
            } @else{
              @include position(absolute,none,none,$tbottom,0,100%,30px);
            }
            @include font(14px,#8C9BAC,normal,"Open Sans");
            white-space: nowrap
          }
        }
      }
      .other { 
        @include duihua(flex-start,0,16px,none,-9.1px,0,-50px,false);
      }
      .mine {
        @include duihua(flex-end,16px,0,-9.1px,none,180deg,-50px);
      }
      .otherone { 
        @include duihua(flex-start,0,16px,none,-9.1px,0,-30px,false);
      }
      .mineone {
        @include duihua(flex-end,16px,0,-9.1px,none,180deg,-30px);
      }
    }
    .sendmsg {
      @include grid(1fr 23px 119px, 19px 11px 79px);
      grid-template-areas:
        "a a a"
        "b b b"
        "c d e";
      width: 100%;
      height: 145px;
      padding: 12px 32px 24px 18px;
      box-sizing: border-box;
      background-color: #f2f4f6;
      position: relative;
      .img{
        width: 19px;
        height: 19px;
        grid-area: a;
        cursor: pointer;
        @include flex(center,center);
        img {
          border-radius: 50%;
          grid-area: a;
        }
      }
      .moreface{
        @include grid(repeat(12,22px),repeat(8,22px));
        @include position(absolute,-226px,none,none,24px,365px,226px);
        grid-gap: 5px;
        box-sizing: border-box;
        padding: 20px;
        flex-wrap: wrap;
        overflow-y: auto;
        border-radius: 6px;
        background-color: #F2F4F6;
        display: none;
        .oneface{
          width: 22px;
          height: 22px;
          flex-shrink: 0;
          cursor: pointer;
        }
      }
      input {
        outline: none;
        border: none;
        border-radius: 6px;
        grid-area: c;
        font-size: 23px;
        color: #607996;
      }
      .send {
        @include flex(center,center);
        @include font(18px,#fff ,normal ,"OpenSans-Semibold" );
        cursor: pointer;
        background-color: #4d75a3;
        align-self: flex-end;
        width: 100%;
        height: 47px;
        border-radius: 6px;
        grid-area: e;
        span{
          text-decoration: underline;
        }
      }
    }
  }
}





